<template>
<div class="srhRsult">
	
	<h3 class="retitle">
		搜索：“{{result}}”
	</h3>
	<ul>
		<li class="recomitem" v-for="(item,index) in list" v-if="index<6" >
			<i class="re-svg iconfont icon-Magnifier"></i>
			<span class="thide">{{item.artists[0].name}} - {{item.name}}</span>
		</li>
	</ul>
</div>
</template>

<script>
	import api from '@/api'
	import axios from 'axios'
	
	export default {
		name:'srhRsult',
		props:["result"],
		watch:{
			result:function(){
				axios.get(api.searchURL+"?keywords="+this.result).then((res)=>{
					console.log(res.data.result.songs)
					this.list=res.data.result.songs;
				})
			}
		},
		data(){
			return {
				list:''
			}
		}
		
		
	}
	
	
</script>

<style lang="scss" scoped="scoped">
@import '../scss/common';
@import '../scss/reset';

.retitle{
	
	text-align: left;
	height:r(100px);
    margin-left:r(20px);
    padding-right: r(20px);
    font-size: r(30px);
    line-height: r(100px);
    color: #507daf;
}
.recomitem{
	text-align: left;
	display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    height: 45px;
    padding-left: 10px;
    border-bottom: r(2px) solid rgba(0,0,0,.1);
}
.re-svg{
	color: #CCCCCC;
	-webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    margin-right: r(14px);
    display: inline-block;
    vertical-align: middle;
    background-position: 0 0;
    background-size: contain;
    background-repeat: no-repeat;
}
.thide{
	display: inline-block;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    width: 1%;
    padding-right: r(20px);
    font-size: r(30px);
    line-height: r(90px);
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: normal;
}

</style>